<template>
  <div class="container">
    <div class="video-container">
      <!-- Display firenum and timestamp -->
      <div class="info">
        <p>Firenum: {{ firenum }}</p>
        <p>TimestampforVideo: {{ timestamp -2}}</p>
        <p>CurrentDateTime: {{ currentDateTime }}</p>
        <!--        当前时间显示组件-->

      </div>
      <!-- Use a canvas to display the video stream -->
      <canvas ref="canvas" class="video-stream" style="float: left; width: 800px; height: 600px;"></canvas>
      <!-- ... other code ... -->
      <!-- Four img tags to display the video streams -->
      <!--      <img class="video-stream" :src="videoSrc2" style="float: left;">-->
      <!-- <img class="video-stream" :src="videoSrc3" /> -->
      <!-- <img class="video-stream" :src="videoSrc4" /> -->
    </div>
    <div class="message-container">
      <!-- Add a div to display the received messages -->
      <div class="message" v-for="message in messages" :key="message.id">{{ message.text }}</div>
    </div>
    <div class="controls">
      <div class="dropdown">
      <select name="one" class="dropdown-select" v-model="selectedCamera">
        <option value="">Select…</option>
        <option value="1">Option #1</option>
        <option value="2">Option #2</option>
        <option value="3">Option #3</option>
        <option value="4">Option #4</option>
      </select>
    </div>
      <button class="submit-btn" @click="submitCameraSelection" >提交</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { trackClick } from "@/api/video";
import { videoReg1, videoReg2, videoReg3, videoReg4 } from "@/api/types/multiplyVideo/recognizeVideo";
import {invade_close_click, monitor_close_click, register_close_click, track_close_click} from "@/api/close";

// Create a ref for current date time
let currentDateTime = ref(new Date().toLocaleString());
// let intervalId; // Store interval id for clearing later

const messages = ref([]);



// 定义定时器的时间间隔（单位：毫秒）
const interval = 1000;

// Add firenum and timestamp to the data
let firenum = ref(0);
let timestamp = ref(0);

// Add a ref for the canvas
const canvas = ref(null);

// Add a list to store the objects
let objects = ref([]);

// 发送HTTP请求并更新数据的函数
// Update sendHttpRequest function
const sendHttpRequest = () => {
  fetch('http://172.20.10.3:8080/endpoint')
      .then(response => response.json())
      .then(data => {
        // Update firenum and timestamp
        firenum.value = data.firenum;
        timestamp.value = data.timestamp;

        // Update objects
        objects.value = data.list;
      })
      .catch(error => {
        console.error('Error:', error);
      });
};

// Add a function to draw the video stream and the boxes
const draw = () => {
  if (canvas.value) {
    const ctx = canvas.value.getContext('2d');

    // Save the current state of the canvas
    ctx.save();

    // Draw the video stream
    const img = new Image();
    img.onload = () => {
      // Clear the canvas before drawing the new frame
      ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);

      // Draw the new frame
      ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height);

      // Restore the state of the canvas
      ctx.restore();

      // Draw the boxes
      objects.value.forEach((obj) => {
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 2;
        ctx.strokeRect(obj.leftupx*0.47, obj.leftupy*0.45, obj.lenx*0.45 ,obj.leny*0.4);
      });
    };
    img.src = videoSrc2.value;
  }
};

// Call the draw function periodically
// setInterval(() => {
//   draw();
// }, 500);
/**
 * 钩子函数实时调用
 */

// 在组件挂载时启动定时器
// onMounted(() => {
//   intervalId = setInterval(() => {
//     currentDateTime.value = new Date().toLocaleString();
//   }, 1000);

  close(); // 调用你的函数
  sendHttpRequest(); // 首次发送请求

  // 以指定的时间间隔重复发送请求
//   setInterval(() => {
//     sendHttpRequest();
//   }, interval);
// });

// onUnmounted(() => {
  //... your other code in the onUnmounted hook

  // clear the interval when the component is unmounted
//   clearInterval(intervalId);
// });

function close(){

  monitor_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });

  register_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });
  invade_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });
  track_close_click().then((response) => {

    var res = response.data
    if (res.respCode === '000000') {
      //ElMessage.success('关闭成功');

    } else {
      ElMessage.error(res.respMsg);
    }
  })
      .catch((error) => {
        console.error(error);
        // ElMessage.error('关闭失败，请重试');
      });


}
//----------------------初始视频流-----------------------------
const videoSrc2 = ref(globalVariable+'/api/video_monitor2/1');

const showCameraSelection = ref(false);
const selectedCamera = ref('');

function toggleCameraSelection() {
  showCameraSelection.value = !showCameraSelection.value;
  selectedCamera.value = '';
}

function submitCameraSelection() {

  let selectedCameraValue = selectedCamera.value; // 从 <select> 元素中获取选中的值

  if (selectedCameraValue === '1') {

    videoSrc2.value = globalVariable+'/api/video_monitor2/1';
    // videoReg1();
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }else if(selectedCameraValue === '2'){
    // videoReg2();
    videoSrc2.value = globalVariable+'/api/video_monitor2/2';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }else if(selectedCameraValue === '3'){
    // videoReg3();
    videoSrc2.value = globalVariable+'/api/video_monitor2/3';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }else if(selectedCameraValue === '4'){
    // videoReg4();
    videoSrc2.value = globalVariable+'/api/video_monitor2/4';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }
}
</script>

<style scoped>
.refresh-btn {
  float: right;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.camera-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

.submit-btn {
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.controls {
  display: flex;
  flex-direction: column;
}

.video-container {
  width: 50%;
}

.video-stream {
  width: 100%;
}

.dropdown {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 40px;
  width: 350px;
  margin-top: 10px;
  background: #f2f2f2;
  border: 1px solid;
  border-color: white #f7f7f7 whitesmoke;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.dropdown:before, .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #888888 transparent;
  pointer-events: none;
}

.dropdown:before {
  border-bottom-style: solid;
  border-top: none;
}

.dropdown:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.dropdown-select {
  position: relative;
  width: 130%;
  margin: 0;
  padding: 6px 8px 6px 10px;
  height: 40px;
  line-height: 14px;
  font-size: 16px;
  color: #62717a;
  text-shadow: 0 1px white;
  background: #f2f2f2; /* Fallback for IE 8 */
  background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.dropdown-select:focus {
  z-index: 3;
  width: 100%;
  color: #394349;
  outline: 2px solid #49aff2;
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: -2px;
}

.dropdown-select > option {
  margin: 3px;
  padding: 6px 8px;
  text-shadow: none;
  background: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
}

/* Fix for IE 8 putting the arrows behind the select element. */

.lt-ie9 .dropdown {
  z-index: 1;
}

.lt-ie9 .dropdown-select {
  z-index: -1;
}

.lt-ie9 .dropdown-select:focus {
  z-index: 3;
}

/* Dirty fix for Firefox adding padding where it shouldn't. */

@-moz-document url-prefix() {
  .dropdown-select {
    padding-left: 6px;
  }
}


</style>